<template>
  <view class="tab-bar">
    <view 
      class="tab-item" 
      :class="{ active: currentPage === 'home' }"
      @click="switchTab('home')"
    >
      <text class="tab-icon">🏠</text>
      <text class="tab-label">首页</text>
    </view>
    
    <view 
      class="tab-item" 
      :class="{ active: currentPage === 'group-buying' }"
      @click="switchTab('group-buying')"
    >
      <text class="tab-icon">👥</text>
      <text class="tab-label">拼单</text>
    </view>
    
    <view 
      class="tab-item" 
      :class="{ active: currentPage === 'orders' }"
      @click="switchTab('orders')"
    >
      <text class="tab-icon">📦</text>
      <text class="tab-label">订单</text>
    </view>
    
    <view 
      class="tab-item" 
      :class="{ active: currentPage === 'profile' }"
      @click="switchTab('profile')"
    >
      <text class="tab-icon">👤</text>
      <text class="tab-label">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    current: {
      type: String,
      default: 'home'
    }
  },
  computed: {
    currentPage() {
      return this.current
    }
  },
  methods: {
    switchTab(page) {
      // 如果已经在当前页面，不执行跳转
      if (page === this.currentPage) {
        return
      }
      
      const routes = {
        'home': '/pages/home/home',
        'group-buying': '/pages/group-buying/group-buying',
        'orders': '/pages/orders/orders',
        'profile': '/pages/profile/profile'
      }
      
      const url = routes[page]
      if (url) {
        uni.switchTab({
          url: url,
          fail: () => {
            // 如果不是 tabBar 页面，使用 redirectTo
            uni.redirectTo({
              url: url
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    padding: 12rpx 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    
    &:active {
      transform: scale(0.95);
    }
    
    .tab-icon {
      font-size: 44rpx;
      transition: all 0.3s ease;
      filter: grayscale(100%);
      opacity: 0.6;
    }
    
    .tab-label {
      font-size: 22rpx;
      color: #999;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    
    /* 选中状态 */
    &.active {
      .tab-icon {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.1);
      }
      
      .tab-label {
        color: #667eea;
        font-weight: 600;
      }
      
      /* 选中指示器 */
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 3rpx;
      }
    }
  }
}
</style>

